<template>
	<div class="tpl29-header">
    <!-- 顶部搜索框 -->
    <div class="search-container">
      <a href="javascript:;" class="ico-left" @click="JumpName('item-class-list')">
        <i></i>
        <span>分类</span>
      </a>
      <div class="search-wrapper">
        <div class="icon" @click="searchList">
          <!-- TODO svg换成图片 -->
          <img class="icon_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
        </div>
        <!-- TODO 小程序input处理 -->
        <input @confirm="searchList" v-model="keyword" type="text" :placeholder="tplItemData.has_duodian?'商品搜索：请输入商品、店铺名称':'商品搜索：请输入商品关键字'" />
      </div> 
      <!-- TODO 会员中心路径暂定为member -->
      <a href="javascript:;" class="ico-right" @click="JumpName('member')">
        <i></i>
        <span>会员</span>
      </a> 
    </div>
    <!-- 滑动分类 -->
    <div class="nav-classify" v-if="tplItemData.datasetNav && tplItemData.datasetNav.length>0">

      <!-- TODO 小程序使用微信组件滚动 -->
      <wx-scroll-view  :scroll-x="canScrollX">
        <ul>
          <li v-for="(item,index) in tplItemData.datasetNav" :class="[index==0?'cur':'']" :key="index">
            <a @click="openLink(item.link)"><span>{{item.showtitle}}</span></a>
          </li>
        </ul>
      </wx-scroll-view>
    </div>
  </div>
</template>

<script>
import Scroll from '@/components/scroll/index'
import Vue from 'vue'
import { openPage } from '@/utils/utils'
import { Swipe, SwipeItem } from 'vant'
Vue.use(Swipe)
Vue.use(SwipeItem)
export default Vue.extend({
  name: 'index',
  data() {
    return {
      imgadvWxH:'0',
      canScrollX: true,
      showIndicators: true,
      autoplay: true,
      keyword: ''
    }
  },
  components: {
    Scroll
  },
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  methods: {
    searchList() {
      this.$JumpName(this, 'item-list', { title: this.keyword })
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    },
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    },
    // TODO 小程序swiper获取图片高度
    onImageLoad(event){
      const imgHeight=event.detail.height
      if(imgHeight>parseFloat(this.imgadvWxH)){
        this.imgadvWxH=imgHeight+'px'
      }
    }
  },

  created() {

  }
})
</script>

<style lang='scss'>
 @import "src/styles/mixin";
 .miniprogram-root {
   .search-wrapper .h5-input {
     margin-top: 0;
   }
 }
.tpl29-header{
  position: relative;
  .search-container{
    width: 100%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20%;
    text-align: center;
    padding: 10px 0;
    display: flex;
    >a {
      display: inline-block;
      text-align: center;
      color: #909090;
      padding: 0 8px;
      &.ico-left{
        padding-left: 3.125%;
        i{
          width: 30px;
          background-image: url('https://img.wifenxiao.com/h5-wfx/images/diy/tpl29/class_icon.png');
        }
      }
      &.ico-right{
        padding-right: 3.125%;
        i{
          width: 30px;
          background-image: url('https://img.wifenxiao.com/h5-wfx/images/diy/tpl29/user_icon.png');
        }
      }
      i {
        display: block;
        height: 36px;
        width: 48px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin: 0 auto;
      }
      span {
        display: block;
        font-size: 20px;
        margin-top: 6px;
      }
    }
    .search-wrapper{
      position:relative;
      flex:1;
      height: 60px;
      border-radius: 30px;
      border: 1px solid #efefef;
      background: #f9f9f9;
      margin: 0 20px;
      display: flex;
      align-items: center;
      .icon {
        position:absolute;
        left:20px;
        // top:50%;
        // transform: translateY(-50%);
        color:#999999;
        font-size: 24px;
        margin-right: 10px;
        .icon_search{
          width:32px;
          height:32px;
        }
      }
      @include placeColor(#999);
      input {
        display: inline-block;
        width:100%;
        height: 60px;
        padding:15px 70px;
        border:0;
        background: transparent;
        box-sizing: border-box;
      }
    }
  }
  .nav-classify{
    white-space: nowrap;
    overflow: hidden;
    background: #fff;
    ul{
      display: inline-block;
      white-space: nowrap;
      li{
        display: inline-block;
        margin-right: 10px;
        text-align: center;
        min-width: 140px;
        color: #666;
        position: relative;
        height: 70px;
        a{
          display: block;
          color: #666;
          overflow: hidden;
          span {
            padding-top: 20px;
            display: inline-block;
            white-space: nowrap;
            max-width: 130px;
            overflow: hidden;
          }
        }
        &.cur{
          a{
            color: #ff4548;
            span {
              font-weight: 500;
              color: #ff4548;
              font-size: 26px;
            }
          }
          &:after {
            content: "";
            position:absolute;
            width: 40%;
            padding: 4px;
            margin: 0 auto;
            display: inherit;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background: url('https://img.wifenxiao.com/h5-wfx/images/diy/tpl29/nav_cur.jpg') center/cover no-repeat;
          }
        }
      }
    }
  }
  
}

</style>
